<template>
  <div>
    <el-button type="danger" plain @click="open">删除</el-button>
    <el-popconfirm title="确定要删除当前行数据吗？" @confirm ='submitDelete' @cancel="cancelDelete">
      <el-button slot="reference">删除</el-button>
    </el-popconfirm>
  </div>

</template>


<script>
export default {
  name: "MessageBox",
  methods: {
    open() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {   // 确定
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submitDelete(){
      this.$message.success('数据已删除')
    },
    cancelDelete(){
      this.$message.info('数据删除已取消')
    }
  }
}
</script>
<style scoped>

</style>